<template>
  <div id="app">
    <!-- 头部标题 header_box  -->
    <div class="header_box">
      <p class="backBtn" @click="backBtn" v-if="getUrl != '/home'">
        <van-icon name="arrow-left" class="backicon"/>
        <span>返回</span>
      </p>黑马程序员
      <p class="addBtn" v-if="getUrl == '/search'" @click="toAddShop">添加</p>
    </div>
    <div class="clearfix"></div>
    <router-view  class="bottom_box"/>
    <!-- 底部导航 van-tabbar -->
    <van-tabbar v-model="active" active-color="#07c160" inactive-color="#000" @change="onChange" >
      <van-tabbar-item name="home" url="#/home">
        <span class="iconfont icon-index-fill" slot="icon" mode="aspectFit"></span>
        首页
      </van-tabbar-item>
      <van-tabbar-item name="vip" url="#/vip">
        <span class="iconfont icon-icon_zhanghao" slot="icon" mode="aspectFit"></span>会员
      </van-tabbar-item>
      <van-tabbar-item name="shopCar" url="#/shopCar" icon="shopping-cart-o" :info="this.$store.getters.mount">购物车</van-tabbar-item>
      <van-tabbar-item name="search" url="#/search" icon="search">搜索</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: "home",
      urls: []
    };
  },
  methods: {
    backBtn() {
      history.back();
      if(this.$route.path.slice(1) == "addShop"){
        this.active = "search";
        return
        
      }
      if (
        this.$route.path.slice(1) != "home" &&
        this.$route.path.slice(1) != "vip" &&
        this.$route.path.slice(1) != "shopCar" &&
        this.$route.path.slice(1) != "search"
      ) {
        this.urls = [];
        this.active = "home";
        this.urls.push(this.active);
      }
      if (this.urls.length > 1) {
        this.urls.pop(1);
        this.active = this.urls[this.urls.length - 1];
      } else if (this.urls.length == 1) {
        this.active = "home";
        this.urls.push(this.active);
      }
    },
    onChange(i) {
      this.urls.push(i);
    },
      toAddShop(){
        this.$router.push('/addShop')
      },
      saveState() {
                sessionStorage.setItem('state', JSON.stringify(this.$store.state))
            }

  },
  created() {
    if(this.$route.path.slice(1) == "addShop"){
      this.active = 'search'
      return 
    }
    if (
      this.$route.path.slice(1) != "home" &&
      this.$route.path.slice(1) != "vip" &&
      this.$route.path.slice(1) != "shopCar" &&
      this.$route.path.slice(1) != "search"
    ) {
      this.active = "home";
    } else {
      this.active = this.$route.path.slice(1);
      this.urls.push(this.active);
    }
    this.active = this.$route.path.slice(1);
    this.urls.push(this.active);
    window.addEventListener('unload', this.saveState)
  },
  computed: {
    getUrl() {
      return this.$route.path;
    }
  }
};
</script>

<style lang="less">
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  // text-align: center;
  color: #2c3e50;
}
.header_box {
  width: 100%;
  height: 40px;
  background: #1989fa;
  text-align: center;
  line-height: 40px;
  color: #fff;
  font-size: 14px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
}
.clearfix {
  height: 40px;
}
.backBtn {
  position: absolute;
  left: 10px;
  top: 0px;
  margin: 0;
  font-size: 14px !important;
}
.addBtn{
  position: absolute;
  right: 10px;
  top: 0px;
  margin: 0;
  
}
.backicon {
  transform: translateY(2.5px);
  margin-right: 1px;
}
.bottom_box::after {
  content : '';
height : 50px;
display :block;
}
</style>
